<!-- 模板 -->
<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">表格</div>
        <div class="layui-card-body">
          <table id="demo_hash" lay-filter="test"></table>
          <script type="text/html" id="barDemo_hash">
              <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
              <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        
              <!-- 这里同样支持 laytpl 语法，如： -->
              {{# if(d.auth){ }}
                <a class="layui-btn layui-btn-xs" lay-event="check">审核</a> 
              {{# } }}
            </script>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 脚本 -->
<script>
  layui.config({
    base: '/src/js/'
  }).use(['jquery', 'mockjs', 'table'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      table = layui.table;

    // 注入mock
    layui.mockjs.inject({
      'POST /demo/table/user1': {
        code: 0,
        msg: "xxx",
        count: 1000,
        'data|20': [{
          'id|+1': 1,
          username: '@name',
          sex: '@boolean',
          city: '@city',
          sign: '@csentence',
          experience: '@integer',
          score: '@integer',
          classify: '@word',
          wealth: '@integer',
          auth: '@boolean'
        }]
      }
    });

    //第一个实例
    table.render({
      method: 'post',
      limit: 20,
      elem: '#demo_hash',
      done: function () {
        $('#demo_hash').next().css('height','auto');
      },
      height: 680,
      url: '/demo/table/user1', //数据接口
      page: true, //开启分页
      cols: [
        [ //表头
          {
            field: 'id',
            title: 'ID',
            width: 80,
            sort: true,
            fixed: 'left'
          }, {
            field: 'username',
            title: '用户名',
            width: 80
          }, {
            field: 'sex',
            title: '性别',
            width: 80,
            sort: true
          }, {
            field: 'city',
            title: '城市',
            width: 80
          }, {
            field: 'sign',
            title: '签名',
            width: 177
          }, {
            field: 'experience',
            title: '积分',
            width: 80,
            sort: true
          }, {
            field: 'score',
            title: '评分',
            width: 80,
            sort: true
          }, {
            field: 'classify',
            title: '职业',
            width: 80
          }, {
            field: 'wealth',
            title: '财富',
            width: 135,
            sort: true
          }, {
            fixed: 'right',
            width: 180,
            align: 'center',
            toolbar: '#barDemo_hash'
          }
        ]
      ]
    });

  });
</script>
<!-- 样式 -->
<style scoped>
</style>